<template>
  <div>

    <SkyCardPanel title="抽屉">
      <div slot="main">
        <sky-radio-group label="进入方式" v-model="radio">
          <sky-radio label="从右向左" value="1"></sky-radio>
          <sky-radio label="从左向右" value="2"></sky-radio>
          <sky-radio label="从上向下" value="3"></sky-radio>
          <sky-radio label="从下往上" value="4"></sky-radio>
        </sky-radio-group>

        <SkyButton type="default" style="margin:30px;" @click="DrawerShow=true">点我打开</SkyButton>

      </div>
    </SkyCardPanel>

    <sky-drawer title="标题" :direction="direction" :DrawerShow.sync="DrawerShow" :before-close="handleClose">
      <div slot="body">
        我来了......
      </div>
    </sky-drawer>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              
        &lt;sky-radio-group label="进入方式" v-model="radio"&gt;
          &lt;sky-radio label="从右向左" value="1"&gt;&lt;/sky-radio&gt;
          &lt;sky-radio label="从左向右" value="2"&gt;&lt;/sky-radio&gt;
          &lt;sky-radio label="从上向下" value="3"&gt;&lt;/sky-radio&gt;
          &lt;sky-radio label="从下往上" value="4"&gt;&lt;/sky-radio&gt;
        &lt;/sky-radio-group&gt;

        &lt;SkyButton type="default" style="margin:30px;" @click="DrawerShow=true"&gt;点我打开&lt;/SkyButton&gt;


        &lt;sky-drawer title="标题" :direction="direction" :DrawerShow.sync="DrawerShow" :before-close="handleClose"&gt;
          &lt;div slot="body"&gt;
            我来了......
          &lt;/div&gt;
        &lt;/sky-drawer&gt;

              
          </code>
      </pre>

        <pre>
          <code class="javascript">
              
        export default {
          data () {
            return {
              radio: '1',
              DrawerShow: false,
              intoType: {
                '1': 'right',
                '2': 'left',
                '3': 'top',
                '4': 'bottom',
              }
            }
          },
          computed: {
            direction () {
              return this.intoType[this.radio]
            }
          },
          methods: {
            //关闭前回调 done()同意关闭
            handleClose (done) {
              done()
            }
          }
        }

              
          </code>
      </pre>

      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1',
        DrawerShow: false,
        intoType: {
          '1': 'right',
          '2': 'left',
          '3': 'top',
          '4': 'bottom',
        }
      }
    },
    computed: {
      direction () {
        return this.intoType[this.radio]
      }
    },
    methods: {
      //关闭前回调 done()同意关闭
      handleClose (done) {
        done()
      }
    }
  }
</script>

<style>
</style>